<template>
  <div>
    <div>
      <mt-header title="景区详情" style="background: linear-gradient(#000000, #035838);">
        <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
      </mt-header>
    </div>
    <div v-if="this.swipelist.length != 0">
      <com-attractionsswipe :swipelist='swipelist'></com-attractionsswipe>
    </div>
    <div v-else>
      <com-swipe></com-swipe>
    </div>
    <div class="div-attractions-detail">
      <div class="div-attractions-detail-name">
        <span>{{jdmc}}</span>
        <span>{{jdjb}}</span>
      </div>
      <div class="div-attractions-detail-phone">
        <span>客服电话： {{kfdh}} </span>
      </div>
      <div class="div-attractions-detail-info">
        <span>简介：{{jdjj}} </span>
      </div>

    </div>
    <mt-cell is-link @click.native="goScenicspotdetail()">
      <span slot="title">景点详情</span>
    </mt-cell>
    <div class="div-attractions-detail-book" v-for="(bookitem) in attractionsbook" :key="bookitem.id">
      <div @click="showhiddenpart(bookitem.id, bookitem.jg)">
        <div>{{bookitem.mc}}</div>
        <div>
          <span v-if="bookitem.jg != '无票'">¥</span>
          <span>{{bookitem.jg}}</span>
        </div>
        <div v-bind:id='down+bookitem.id' class="button-down" v-if="bookitem.jg != '无票'">
          <img slot="icon" src="../../assets/images/tool/down.png" width="10" height="10">
        </div>
        <div v-bind:id='up+bookitem.id' class="button-up" v-if="bookitem.jg != '无票'">
          <img slot="icon" src="../../assets/images/tool/up.png" width="10" height="10">
        </div>
        <div style="clear: both;"></div>
      </div>
      <div v-bind:id='bookitem.id' class="div-attractions-detail-book-hidden-part">
        <div class="hidden-left">
          <div class="div-msjg">
            <span> 门市价：¥{{bookitem.msjg}}</span>
          </div>
          <div class="div-xsl">
            <span> 销量： {{bookitem.xsl}}</span>
          </div>
          <div>
            <span class="span-tkbq">{{bookitem.tkbq}}</span>
          </div>
        </div>
        <div class="hidden-right">
          <div style="div-price">
            <span class="span-price">¥{{bookitem.jg}}</span>
          </div>
          <div class="div-book-button" @click="ticketSchedule(bookitem.id,bookitem.mc,bookitem.jg)">
            <button class="mint-button mint-button--default mint-button--large is-plain button-book">
              预定
            </button>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
    <div class="div-recommend">
      <ul>
        <span>景点推荐</span>
      </ul>
      <div class="div-attractions-recommend" v-for="(recommend) in attractionrecommend" :key="recommend.id" @click="goAttractionsdetails(recommend.id)">
        <div class="div-recommend-img">
          <img src="../../assets/images/photo/666.jpg" v-if="recommend.tp === ''" />
          <img v-bind:src='host+recommend.tp' v-else/>
        </div>
        <div class="div-recommend-mc">
          <span>{{recommend.mc}}</span>
        </div>
        <div class="div-recommend-jg">
          <span v-show="recommend.jg != '暂无报价'">¥</span>
          <span>{{recommend.jg}}</span>
          <span v-show="recommend.jg != '暂无报价'">起</span>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
    <div>
      <mt-popup v-model="popupVisiblebook" position="bottom" style="width: 100%;height:90%;background: white;">
        <entrance-ticket :ticketexplaindata='ticketexplaindata' :mmpid='mmpid' :jqid='jqid' :jdmc='jdmc' :mpjg='mpjg' @popupVisiblebook="closepopup"></entrance-ticket>
      </mt-popup>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import Attractionsswipe from "../../common/vue/Attractions-swipe";
import Swipe from "../../components/Swipe";
import Entranceticket from "../entrance-ticket/ticket-explain";
export default {
  name: "attractionsdetailfirst",
  components: {
    comAttractionsswipe: Attractionsswipe,
    comSwipe: Swipe,
    entranceTicket: Entranceticket
  },
  data() {
    return {
      jqid: this.$route.query.jqid,
      host: "http://wap.tuoxingwang.net/",
      swipelist: [],
      jdjj: "",
      jdmc: "",
      jdjb: "",
      kfdh: "",
      attractionsbook: [],
      down: "down",
      up: "up",
      popupVisiblebook: false,
      attractionrecommend: [],
      ticketexplaindata: "",
      mmpid: "",
      jdmc: "",
      mpjg: "",
      jwd: ""
    };
  },
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  mounted() {
    this.relesedata();
  },
  methods: {
    goBack() {
      history.go(-1);
    },
    closepopup(msg) {
      console.log(msg);
      this.popupVisiblebook = msg;
    },
    showhiddenpart(id, jg) {
      if (jg != "无票") {
        $("#" + id).fadeToggle("fast", "linear", function() {});
        $("#down" + id).toggle();
        $("#up" + id).toggle();
      }
    },
    getAttactionsdetail() {
      axios({
        method: "post",
        url: "/api/jqxx/data.htm",
        params: {
          jqid: this.jqid
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          console.log(res.data[0]);
          this.swipelist = res.data[0].src;
          this.jdmc = res.data[0].jdmc;
          this.jdjb = res.data[0].jdjb;
          this.kfdh = res.data[0].kfdh;
          this.jdjj = res.data[0].jdjj;
          this.jwd = res.data[0].jwd;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    getAttactionsdetailbook() {
      axios({
        method: "post",
        url: "/api/jqmpyd/list.htm",
        params: {
          jqid: this.jqid
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          this.attractionsbook = res.data;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    getAttactionsdetailrecommend() {
      axios({
        method: "post",
        url: "/api/jdqttj/list.htm",
        params: {
          jqid: this.jqid,
          zdid: 15
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          // console.log(res.data);
          this.attractionrecommend = res.data;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    goAttractionsdetails(jqid) {
      // +new Date()返回字符串
      this.$router.push({
        path: "/attractionsdetailfirst",
        query: {
          jqid: jqid,
          t: +new Date()
        }
      });
    },
    //路由改变重新获取数据
    relesedata() {
      // console.log('--------------');
      this.getAttactionsdetail();
      this.getAttactionsdetailbook();
      this.getAttactionsdetailrecommend();
    },
    ticketSchedule(mpid, mc, mpjg) {
      axios({
        method: "post",
        url: "/api/mppxsm/data.htm",
        params: {
          mpid: mpid,
          lxsuserid: ""
        }
      }).then(res => {
        res = res.data;
        if (res.zt === true) {
          this.ticketexplaindata = res.data[0];
          console.log(this.ticketexplaindata);
          this.mmpid = mpid;
          this.jdmc = mc;
          this.mpjg = mpjg;
          this.popupVisiblebook = true;
        } else {
          Indicator.close();
          let instance = Toast({
            message: "加载失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    goScenicspotdetail() {
      this.$router.push({
        path: "/scenicspotdetail",
        query: {
          jwd: this.jwd,
          jqid: this.jqid
        }
      });
    }
  }
  // watch: {
  //$route: "relesedata"
  // $route(to, from) {
  // this.jqid = to.query.jqid;
  // this.relesedata();
  // }
  //}
};
</script>
<style scoped>
.child-view {
  position: relative;
  height: 100%;
  padding-top: 40px;
}
.mint-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.mint-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}
.mint-swipe-item {
  line-height: 200px;
  background-size: 100%, 100%;
}
.swipe {
  width: 100%;
}

.swipe-img {
  width: 100%;
  height: 100%;
}
.div-attractions-detail {
  position: relative;
  width: 100%;
}
.div-attractions-detail-name {
  padding: 5px;
}
.div-attractions-detail-name > span:nth-child(1) {
  color: black;
  font-size: 20px;
}
.div-attractions-detail-name > span:nth-child(2) {
  color: #999999;
  font-size: 16px;
}
.div-attractions-detail-phone {
  padding: 5px;
}
.div-attractions-detail-phone > span {
  color: #999999;
  font-size: 16px;
}
.div-attractions-detail-info {
  padding: 5px;
}
.div-attractions-detail-info > span {
  color: #999999;
  font-size: 16px;
}
.div-attractions-detail-book {
  border-top: 1px solid #eee;
  padding: 10px;
}
.div-attractions-detail-book > div:nth-child(1) > div:nth-child(1) {
  float: left;
  width: 75%;
}
.div-attractions-detail-book > div:nth-child(1) > div:nth-child(2) {
  float: left;
  width: 15%;
  text-align: right;
}
.div-attractions-detail-book
  > div:nth-child(1)
  > div:nth-child(2)
  > span:nth-child(1) {
  color: rgb(240, 113, 39);
  font-size: 10px;
}
.div-attractions-detail-book
  > div:nth-child(1)
  > div:nth-child(2)
  > span:nth-child(2) {
  color: rgb(240, 113, 39);
  font-size: 17px;
}

.div-attractions-detail-book-hidden-part {
  background-color: #f5f5f5;
  display: none;
  padding: 10px;
}
.button-down {
  float: right;
  margin-right: 7px;
}
.button-up {
  float: right;
  width: 5%;
  display: none;
}
.hidden-left {
  float: left;
  width: 50%;
}
.hidden-right {
  float: right;
  width: 30%;
  text-align: right;
}
.span-tkbq {
  border: 1px solid #b84aa0;
  color: #b84aa0;
  border-radius: 5px;
  font-size: 12px;
  padding: 1px 4px;
}
.span-book-button {
  height: 0.6rem;
  background: #ff9800;
  color: #fff;
  font-size: 1.1rem;
  line-height: 0.6rem;
  -webkit-border-radius: 0.06rem;
  -moz-border-radius: 0.06rem;
  border-radius: 0.3rem;
}
.div-book-button {
  padding-top: 5px;
}
.button-book {
  background-color: rgb(240, 113, 39);
  display: block;
  width: 80%;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0);
  float: right;
  line-height: 24px;
  color: #ffffff;
}
.span-price {
  color: #ff9800;
  font-size: 15px;
  padding-right: 5px;
}
.div-msjg {
  padding: 2px;
}
.div-msjg > span {
  color: #888;
  text-decoration: line-through;
}
.div-xsl {
  padding: 2px;
}
.div-xsl > span {
  color: #888;
  font-size: 13px;
}
.div-recommend {
  border-top: 10px solid #eeeeee;
}
.div-recommend > ul {
  text-align: center;
  list-style-type: none;
  padding-top: 5px;
}
.div-recommend > ul > span {
  font-size: 18px;
  color: black;
}
.div-recommend-img {
  width: 80px;
  height: 80px;
  float: left;
}
.div-recommend-img img {
  width: 100%;
  height: 100%;
}
.div-attractions-recommend {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
.div-recommend-mc > span {
  font-size: 18px;
  margin-left: 5px;
}
.div-recommend-jg {
  text-align: right;
}
.div-recommend-jg > span:nth-child(2) {
  color: #ff9800;
  font-size: 18px;
}
.div-recommend-jg > span:nth-child(1) {
  color: #999999;
  font-size: 10px;
}
.div-recommend-jg > span:nth-child(3) {
  color: #999999;
  font-size: 10px;
}
</style>
